<script setup>
import router from '@/router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useAdmerStore } from '@/stores/admerStore';
import { queryOrderAPI, getRefundMsgAPI, refutRefundAPI, agreeRefundAPI, queryRefundListAPI } from '@/apis/admer'
import { getOrderDetailsAPI, getOrderLogistics } from '@/apis/order';
import dealOrder from './components/dealOrder.vue'
import dealRefund from './components/dealRefund.vue'
import dealGoods from './components/dealGoods.vue'
import dealAdmer from './components/dealAdmer.vue'
const switchPlatform = () => {
    ElMessageBox.confirm('切换到用户平台？', '欢迎您！',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
        }
    ).then(() => {
        router.replace({ path: '/home' })
    })
}
onMounted(() => {
    if (useAdmerStore().admerInfo == null) {
        router.replace({ path: '/admerLogin' })
    }
})
const aside = ref(0)
const fuction = ref(1)

</script>
<template>
    <el-container>

        <!-- 导航栏 -->
        <el-header
            style="text-align: center; border-top-right-radius: 5px;border-top-left-radius: 5px; background-color: black;padding: 0px;height: 50px;color:#cdcdcd;">
            <el-icon style="position: fixed;top:10px;left:10px;color: #cdcdcd;" @click="switchPlatform">
                <SwitchFilled />
            </el-icon>
            <p style="display: inline-block;margin-block-start: 11px;margin-block-end: 0;">
                后台管理平台
            </p>
        </el-header>

        <el-container style="position: relative;">
            <!-- 分类侧边栏 -->
            <template v-if="aside == 0">
                <el-aside style="position: relative; width: 120px;border-bottom-left-radius:5px ;padding-right: 0;">
                    <el-menu background-color="#545c64" :default-active="1" active-text-color="#ffd04b" text-color="#fff"
                        style="height: 620px;">

                        <el-menu-item style="text-align: center;" :index="1" @click="fuction = 1; query()">
                            订单管理
                        </el-menu-item>

                        <el-menu-item style="text-align: center;" :index="2" @click="fuction = 2; queryRefundList()">
                            退款处理
                        </el-menu-item>

                        <el-menu-item style="text-align: center;" :index="3" @click="fuction = 3">
                            商品管理
                        </el-menu-item>

                        <el-menu-item v-if="useAdmerStore().admerInfo.data == 2" style="text-align: center;" :index="4"
                            @click="fuction = 4">
                            人员注册
                        </el-menu-item>
                    </el-menu>
                    <el-icon style="position: absolute;top:0px;right:0px;box-shadow: -3px 0px 3px 0px #333;"
                        @click="aside = 1">
                        <DArrowLeft />
                    </el-icon>
                </el-aside>
            </template>
            <template v-else style="position:relative">

                <el-icon style="position: absolute;top:0px;left:0px;box-shadow: 3px 0px 3px 0px #cdcdcd;"
                    @click="aside = 0">
                    <DArrowRight />
                </el-icon>

            </template>


            <!-- 主要内容 -->
            <!-- 订单管理 -->
            <template v-if="fuction == 1">
                <dealOrder />
            </template>

            <!--退款处理-->
            <template v-else-if="fuction == 2">
                <dealRefund />
            </template>

            <template v-else-if="fuction == 3">
                <dealGoods />
            </template>

            <template v-else>
                <dealAdmer />
            </template>
        </el-container>
    </el-container>
</template>